<template>
  <!-- ======= Footer ======= -->
  <footer id="footer">
    <div class="footer-top">
      <div class="container">
        <div class="row">
          <div class="col-md-3 footer-links">
            <h4>链接</h4>
            <ul>
              <template v-for="(item, index) in MenuData" :key="index">
                <li>
                  <i class="bi bi-chevron-right"></i>
                  <a :href="item.url">{{ item.title }}</a>
                </li>
              </template>
            </ul>
          </div>

          <div class="col-md-3 footer-links">
            <h4>业务范围</h4>
            <ul>
              <template v-for="(item, index) in ServicesData" :key="index">
                <li>
                  <i class="bi bi-chevron-right"></i> <a>{{ item.title }}</a>
                </li>
              </template>
            </ul>
          </div>

          <div class="col-md-3 footer-contact" v-if="contact">
            {{ void (temp = jsonStringTojsObject(contact.contentDescription)) }}
            <h4>联系方式</h4>
            <p>地址：{{ temp.address }}</p>
            <p>电子邮箱：{{ temp.email }}</p>
            <p>联系电话：{{ temp.tel }}</p>
          </div>

          <div class="col-md-3 footer-info">
            <h4 class="">
              <img
                class="img-fluid"
                :src="require('@/assets/img/logo/logo-color-horizon.png')"
                style=""
              />
            </h4>
            <h5 class="text-center">进取·创新·思辨·担当</h5>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">
      Copyright &copy; 2022.广州全睿信息科技有限公司
      <!-- <p>Designed by BootstrapMade</p> -->
    </div>
    <div class="container"></div>
  </footer>
  <!-- End Footer -->
</template>

<script>
import { jsonStringTojsObject } from "@/api/index.js";
import { IndexData, HeaderData } from "@/assets/js/data.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "Footer",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      contact: computed(() => {
        return proxy.$store.getters.getContact;
      }),
      ServicesData: IndexData.ServicesData,
      MenuData: HeaderData.MenuData,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.initData();
    });
    //

    //
    const methods = {
      jsonStringTojsObject,
      initData: () => {
        if (!proxy.$store.state.contact) {
          proxy.$store.dispatch("getContact", null);
        }
      },
    };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style scoped>
#footer {
  background: #83c0af;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 0.85rem;
}

#footer .footer-top {
  background: #83c0af;
  border-top: 1px solid #ffffff;
  /* border-bottom: 1px solid #000000; */
  padding: 30px 0 30px 0;
}
#footer .footer-top .footer-info {
  margin-bottom: 30px;
}
#footer .footer-top .footer-info h3 {
  font-size: 1.5rem;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  color: #a2cce3;
  font-weight: 600;
}
#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Roboto", sans-serif;
  color: #fff;
}

#footer .footer-top h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(65, 65, 65);
  position: relative;
  padding-bottom: 12px;
}
#footer .footer-top .footer-links {
}
#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: rgb(65, 65, 65);
  font-size: 1rem;
  line-height: 1;
}
#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}
#footer .footer-top .footer-links ul a {
  color: rgb(65, 65, 65);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
  color: #ffffff;
}
#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}
#footer .footer-top .footer-contact p {
  line-height: 26px;
  color: rgb(65, 65, 65);
}
#footer .copyright {
  color: #333333;
  text-align: center;
  padding-top: 10px;
}
</style>
